<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		body,
		html {
			height: 100%;
		}

		body {

			/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，
		    大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
			-webkit-perspective: 1000px;
		 -moz-perspective: 1000px;
			-ms-perspective: 1000px;
			perspective: 1000px;
		 background-color: #212121;
			font-family: '微软雅黑';
		}

		.book {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -300px;
			width: 400px;
			height: 550px;
			background-color: #fff;
			-webkit-transform: rotateX(30deg);
			-ms-transform: rotateX(30deg);
			-o-transform: rotateX(30deg);
			transform: rotateX(30deg);
		}

		.preserve-3d {

			/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内,
		    还是在该元素所在的平面内被扁平化。*/
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			/*规定如何在 3D 空间中呈现被嵌套的元素*/
			transform-style: preserve-3d;
		}

		.book-page {
			position: absolute;
			top: 0;
			left: 0;
			width: 400px;
			height: 550px;
			/*设置四个边框的样式*/
			border: 1px solid papayawhip;
			text-align: center;
		}

		.book-page-box {
			-webkit-transform-origin: 0 50%;
			-moz-transform-origin: 0 50%;
			-ms-transform-origin: 0 50%;
			-o-transform-origin: 0 50%;
			/*设置旋转元素的基点位置*/
			transform-origin: 0 50%;
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			/*旋转DIV元素*/
			transform: rotateY(0deg);
		}

		@keyframes flipBook1 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-160deg);
				-ms-transform: rotateY(-160deg);
				-o-transform: rotateY(-160deg);
				transform: rotateY(-160deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		/* Firefox */
		@-moz-keyframes flipBook1 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-160deg);
				-ms-transform: rotateY(-160deg);
				-o-transform: rotateY(-160deg);
				transform: rotateY(-160deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		/* Safari and Chrome */
		@-webkit-keyframes flipBook1 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-160deg);
				-ms-transform: rotateY(-160deg);
				-o-transform: rotateY(-160deg);
				transform: rotateY(-160deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		/* Opera */
		@-o-keyframes flipBook1 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-160deg);
				-ms-transform: rotateY(-160deg);
				-o-transform: rotateY(-160deg);
				transform: rotateY(-160deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		@keyframes flipBook2 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-150deg);
				-ms-transform: rotateY(-150deg);
				-o-transform: rotateY(-150deg);
				transform: rotateY(-150deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		/* Firefox */
		@-moz-keyframes flipBook2 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-150deg);
				-ms-transform: rotateY(-150deg);
				-o-transform: rotateY(-150deg);
				transform: rotateY(-150deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		/* Safari and Chrome */
		@-webkit-keyframes flipBook2 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
		 	-webkit-transform: rotateY(-150deg);
				-ms-transform: rotateY(-150deg);
				-o-transform: rotateY(-150deg);
				transform: rotateY(-150deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		/* Opera */
		@-o-keyframes flipBook2 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-150deg);
				-ms-transform: rotateY(-150deg);
				-o-transform: rotateY(-150deg);
				transform: rotateY(-150deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		@keyframes flipBook3 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-140deg);
				-ms-transform: rotateY(-140deg);
				-o-transform: rotateY(-140deg);
				transform: rotateY(-140deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		/* Firefox */
		@-moz-keyframes flipBook3 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-140deg);
				-ms-transform: rotateY(-140deg);
				-o-transform: rotateY(-140deg);
				transform: rotateY(-140deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		/* Safari and Chrome */
		@-webkit-keyframes flipBook3 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-140deg);
				-ms-transform: rotateY(-140deg);
				-o-transform: rotateY(-140deg);
				transform: rotateY(-140deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		/* Opera */
		@-o-keyframes flipBook3 {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			50% {
				-webkit-transform: rotateY(-140deg);
				-ms-transform: rotateY(-140deg);
				-o-transform: rotateY(-140deg);
				transform: rotateY(-140deg);
			}

			100% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		/*书的封面*/
		.book-page-1 .page-front {
			background-color: cornflowerblue;
		}

		.book-page-1 .page-back {
			background-color: #fff;
		}

		.book-page-1 .page-front p {
			font-size: 40px;
			color: #fff;
			margin-top: 100px;
			font-family: 华文琥珀;
			vertical-align: middle;
			text-align: center;
		}

		.flip-animation-1 {
			/*把 "flipBook" 动画捆绑到 div 元素，时长：17 秒*/
			animation: flipBook1 17s;
			-moz-animation: flipBook1 17s;
			/* Firefox */
			-webkit-animation: flipBook1 17s;
			/* Safari and Chrome */
			-o-animation: flipBook1 17s;
			/* Opera */
		}

		/*书的第二页*/
		.book-page-2 .page-back,
		.book-page-2 .page-front {
			background-color: #fff;
		}

		.book-page-2 .page-front p {
			font-size: 25px;
			color: #1976D2;
			font-family: 华文楷体;
			margin-top: 100px;
			writing-mode: tb-rl;
		}

		.flip-animation-2 {
			/*把 "flipBook2" 动画捆绑到 div 元素，时长：13 秒,延长2秒*/
			animation: flipBook2 13s 2s;
			-moz-animation: flipBook2 13s 2s;
			/* Firefox */
			-webkit-animation: flipBook2 13s 2s;
			/* Safari and Chrome */
			-o-animation: flipBook2 13s 2s;
			/* Opera */
		}

		/*书的第三页*/
		.book-page-3 .page-back,
		.book-page-3 .page-front {
			background-color: #fff;
		}

		.book-page-3 .page-front p {
			font-size: 30px;
			color: #1976D2;
			margin-top: 100px;
			font-family: 华文楷体;
		}

		.flip-animation-3 {
			animation: flipBook3 10s 3s;
			-moz-animation: flipBook3 10s 3s;
			/* Firefox */
			-webkit-animation: flipBook3 10s 3s;
			/* Safari and Chrome */
			-o-animation: flipBook3 10s 3s;
			/* Opera */
		}

		/*书的第四页*/
		.book-page-4 .page-front p {
			font-size: 30px;
			color: #1976D2;
			margin-top: 50px;
			writing-mode: tb-rl;
			font-family: 华文楷体;
		}
	</style>
	<body>
		<!-- 代码部分begin -->
		<!-- 书的主体 -->
		<div class="book preserve-3d">
			<!-- 书的最后一页 -->
		 <div class="book-page-box book-page-4 preserve-3d">
				<div class="book-page page-front">
					<p>平生不会相思，才会相思，便害相思，身似浮云，心如飞絮，气若游丝；空一缕余香再此
						盼千金游子何之，症候来时，正是何时，灯半昏时，月半明时。
						<br />
						<br />
						<br />
					</p>
				</div>
			</div>
			<!-- 书的第三页 -->
			<div class="book-page-box book-page-3 preserve-3d flip-animation-3">
				<div class="book-page page-front">
					<p><br />文字部分<br />
						文字部分<br />
						<br />
						文字部分。
						<br />
						世不相忘。<br />
						<br />
						文字部分
						<br />
						文字部分
					</p>
				</div>
			</div>
			<!-- 书的第二页 -->
			<div class="book-page-box book-page-2 preserve-3d flip-animation-2">
				<div class="book-page page-front">
					<p>文字部分</p>
				</div>
			</div>
			<!-- 书的封面 -->
			<div class="book-page-box book-page-1 preserve-3d flip-animation-1">
				<div class="book-page page-front">
					<p>
						<br />
						<br />
						<br />
		 			<br />
						文字部分
						<br>
						文字部分
					</p>
				</div>
			</div>
		</div>
	</body>
</html>
